<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="themes/default/header::header(null,null)"></div>
<body>
<div class="main-content index-page clearfix">
    <div class="post-lists">
        <div class="post-lists-body">
            <div id="uploader" class="wu-example">
                <!--用来存放文件信息-->
                <div id="fileList" class="uploader-list"></div>
                <div class="btns">
                    <div id="picker">选择文件</div>
                    <button id="submitBtn" class="btn btn-default">开始上传</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <div class="comment-container">
        <div id="comments" class="clearfix">
            <div>
                <form method="post" id="comment-form" class="comment-form" role="form"
                      onsubmit="return TaleComment.subComment();">
                    <input type="text" name="author" maxlength="12" id="author"
                           class="form-control input-control clearfix"
                           placeholder="姓名 (*)"
                    />
                    <input type="email" name="mail" id="mail" class="form-control input-control clearfix"
                           placeholder="邮箱 (*)"
                    />
                    <input type="url" name="url" id="url" class="form-control input-control clearfix"
                           placeholder="网址 (http://)"
                    />
                    <textarea name="text" id="textarea" class="form-control" placeholder="以上信息可以为空,评论不能为空哦!"
                              required="required" minlength="5"
                              maxlength="2000"></textarea>
                    <button type="submit" class="submit" id="misubmit">提交</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<div th:replace="themes/default/footer::footer"></div>
<script type="text/javascript" th:src="@{/user/plugins/webuploader/webuploader.min.js}"></script>
<script>
    $(function () {
        let $list = $("#fileList");
        let $btn = $("#submitBtn");
        let state = 'pending'; // 上传文件初始化
        let uploader = WebUploader.create({
            swf: '/user/plugins/webuploader/Uploader.swf',
            server: 'http://localhost:8081/upload',
            pick: '#picker',
            resize: false
        });
        uploader.on('fileQueued', function (file) {
            $list.append('<div id="' + file.id + '" class="item">'
                + '<h4 class="info">' + file.name + '</h4>'
                + '<p class="state">等待上传...</p>' + '</div>');
        });

        uploader.on('uploadProgress',
            function (file, percentage) {
                let $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $(
                        '<div class="progress progress-striped active">'
                        + '<div class="progress-bar" role="progressbar" style="width: 0%">'
                        + '</div>' + '</div>')
                        .appendTo($li).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css('width', percentage * 100 + '%');
            });


        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).find('p.state').text('已上传');
        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });
        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });
    });
</script>
</html>
